<template lang="jade">
    div(class="clearfix")
        div(style="padding:10px 0 5px;",class="pull-right")
            el-pagination(@size-change="handleSizeChange",
                   @current-change="handleCurrentChange",
                   :current-page="currentPage",
                   :page-sizes="[1,10, 20, 40, 50]",
                   :page-size="10",
                   background,
                   layout="total, sizes, prev, pager, next",
                   :total="total")
</template>
<script>
  export default  {
        props: {
            page: {type: Object, default: function () {
                    return {
                        maxResultCount: 10,
                        skipCount: 0
                    }
                }
            },
            total: { type: Number, default: 0},
            currentPage: { type: Number, default: 1}
        },
        model: {prop: 'page',event: 'change'},
        
        methods: {
            handleCurrentChange: function (val) {
                this.page.skipCount = (val - 1) * this.page.maxResultCount;
                this.$emit('change', this.page);
            },
            handleSizeChange: function (val) {
                this.page.maxResultCount = val;
                this.$emit('change', this.page);
            }
        }
    }
</script>